<template>
  <div class="spec-preview" @mousemove="mouseMove">
    <img :src="defaultImg" />
    <div class="event"></div>
    <div class="big">
      <img :src="defaultImg" id="bigImg" />
    </div>
    <div class="mask"></div>
  </div>
</template>

<script lang="ts" setup>
import * as _ from "lodash";
import { computed } from "vue";

const props = defineProps(["skuInfo", "zoomImg"]);

const defaultImg = computed(() => {
  return props.zoomImg ? props.zoomImg : props.skuInfo?.skuDefaultImg;
});

//移动蒙版逻辑
const moveMask = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  //大图
  const bigImg = document.querySelector("#bigImg") as HTMLElement;
  const big = document.querySelector(".big") as HTMLElement;
  const parentMask = document.querySelector(".spec-preview") as HTMLElement;
  //蒙版位置
  const mask = document.querySelector(".mask") as HTMLElement;
  let left = event.offsetX - mask.offsetWidth / 2;
  let top = event.offsetY - mask.offsetTop / 2;
  if (left < 0) {
    left = 0;
  } else if (left > target.offsetWidth - mask.offsetWidth) {
    left = target.offsetWidth - mask.offsetWidth;
  }

  if (top < 0) {
    top = 0;
  } else if (top > target.offsetHeight - mask.offsetHeight) {
    top = target.offsetHeight - mask.offsetHeight;
  }
  mask.style.left = left + "px";
  mask.style.top = top + "px";
  //大图移动比例  大图可移动距离 / mask可移动距离  (负值)
  const ratio =
    (big.offsetWidth - bigImg.offsetWidth) /
    (parentMask.offsetWidth - mask.offsetWidth);

  bigImg.style.left = left * ratio + "px";
  bigImg.style.top = top * ratio + "px";
};

const mouseMove = _.throttle(moveMask, 10);
</script>

<style lang="less">
.spec-preview {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;

  img {
    width: 100%;
    height: 100%;
  }

  .event {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 998;
  }

  .mask {
    width: 50%;
    height: 50%;
    background-color: rgba(0, 255, 0, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
  }

  .big {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1px;
    left: 100%;
    border: 1px solid #aaa;
    overflow: hidden;
    z-index: 998;
    display: none;
    background: white;

    img {
      width: 200%;
      max-width: 200%;
      height: 200%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .event:hover ~ .mask,
  .event:hover ~ .big {
    display: block;
  }
}
</style>
